<template>
	<view class="container">
		<view class="content-wrapper">
			<image src="/static/hotel1.jpg" mode="widthFix" style="width: 100%; border-radius: 10rpx;"></image>
			
			<view class="mt-20">
				<text class="block" style="font-weight: bold; font-size: 36rpx;">北京王府井大酒店</text>
				<view class="flex align-center mt-10">
					<text class="text-red">4.8分</text>
					<text class="text-gray ml-10">1280条评论</text>
				</view>
				<text class="block text-gray mt-10">东城区王府井大街</text>
				
				<view class="flex align-center mt-20">
					<text class="text-red" style="font-size: 36rpx;">¥680</text>
					<text class="text-gray ml-20">起/晚</text>
				</view>
				
				<view class="flex mt-20">
					<text class="tag mr-10">五星级酒店</text>
					<text class="tag mr-10">商务出行</text>
					<text class="tag">地理位置优越</text>
				</view>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">房间信息</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">房间类型</text>
					<text>豪华大床房</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">面积</text>
					<text>35㎡</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">最多入住</text>
					<text>2成人1儿童</text>
				</view>
				
				<view class="info-item flex justify-between">
					<text class="text-gray">床型</text>
					<text>1张1.8米双人床</text>
				</view>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">酒店介绍</text>
				</view>
				
				<text class="block text-gray">
					北京王府井大酒店地处繁华的王府井商业区，地理位置优越，步行即可到达故宫、天安门广场等著名景点。
					酒店拥有各类客房，配备完善的设施和贴心的服务。餐厅提供中西式自助早餐，品种丰富，品质上乘。
					无论是商务出行还是休闲旅游，都是您的理想之选。
				</text>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">酒店设施</text>
				</view>
				
				<view class="facility-list">
					<view class="facility-item flex mb-20">
						<text class="iconfont icon-wifi text-primary" style="font-size: 40rpx; margin-right: 20rpx;"></text>
						<text>免费WiFi</text>
					</view>
					<view class="facility-item flex mb-20">
						<text class="iconfont icon-parking text-primary" style="font-size: 40rpx; margin-right: 20rpx;"></text>
						<text>免费停车场</text>
					</view>
					<view class="facility-item flex mb-20">
						<text class="iconfont icon-restaurant text-primary" style="font-size: 40rpx; margin-right: 20rpx;"></text>
						<text>餐厅</text>
					</view>
					<view class="facility-item flex">
						<text class="iconfont icon-gym text-primary" style="font-size: 40rpx; margin-right: 20rpx;"></text>
						<text>健身房</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="fixed-bottom flex">
			<view class="flex align-center" style="flex: 1; padding: 0 20rpx;">
				<text class="iconfont icon-collect" style="font-size: 40rpx; margin-right: 10rpx;"></text>
				<text>收藏</text>
			</view>
			<view class="button" style="flex: 2;" @click="bookRoom">立即预订</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			bookRoom() {
				uni.showToast({
					title: '预订功能开发中',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.tag {
		background: #f5f5f5;
		color: #666;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	
	.info-item {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.facility-item {
		flex: 1;
	}
	
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.content-wrapper {
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		padding-bottom: 140rpx;
	}
</style>